<template>
  <div v-if="isShowTip" :style="{ 'margin-left': marginLeft }" class="contrast-info-tiptool-wrap">
    <el-popover
      placement="top"
      trigger="hover">
      <div style="display: flex;">
        原订单：<slot v-if="isShowTip" name="tipContent"/>
      </div>
      <i slot="reference" class="el-icon-warning info-button" />
    </el-popover>
  </div>
</template>
<script>
import { getTargetData } from '@/utils';
export default {
  name: 'ContrastInfoTipTool',
  props: {
    originData: {
      type: Object,
      default: () => {
        return null;
      }
    },
    newData: {
      type: Object,
      default: () => {
        return null;
      }
    },
    correlateFiled: {
      type: Array,
      default: () => {
        return [];
      }
    },
    marginLeft: {
      type: String,
      default: '0px'
    }
  },
  computed: {
    isShowTip() {
      let isDiff = false;
      this.correlateFiled.forEach(filed => {
        const newData = this.unifyValue(this.getTargetData(this.newData, filed));
        const originData = this.unifyValue(this.getTargetData(this.originData, filed));
        if (JSON.stringify(newData) !== JSON.stringify(originData)) {
          isDiff = true;
        }
      });
      return (this.originData && JSON.stringify(this.originData) !== '{}') && isDiff;
    }
  },
  methods: {
    getTargetData,
    unifyValue(data) {
      if (data instanceof Array && data.length === 0) {
        return '--';
      }
      return data;
    }
  }
};
</script>
<style lang="scss" scoped>
.contrast-info-tiptool-wrap {
  display: inline-block;
}
.info-button {
  color: #F56C6C;
  cursor: pointer;
}
</style>
